﻿<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
        优质水会 > 其它水会
    </title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="generator" content="" data-variable="/,cn,10001,,10001,res032" />
    <link rel='stylesheet' href='css/index.css'>
</head>

<body class="met-navfixed">
    <header id="header" class="header-fixed">
        <div class="container">
            <ul class="head-list">
                <li class="left tel">
                    <img src="images/1514354107.png" alt="">
                    <span>
                        全国咨询热线：
                    </span>
                    <em>
                        400-123-4567
                    </em>
                </li>
                <li class="right">
                    <ul>
                        <li>
                            <img src="images/1514355047.png" alt="一流的服务">
                            <span>
                                一流的服务
                            </span>
                        </li>
                        <li>
                            <img src="images/1514354958.png" alt="透明的价格">
                            <span>
                                透明的价格
                            </span>
                        </li>
                        <li>
                            <img src="images/1514354817.png" alt="重信守誉">
                            <span>
                                重信守誉
                            </span>
                        </li>
                        <li>
                            <img src="images/1514354461.png" alt="优质的技师">
                            <span>
                                优质的技师
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>

    <nav class="navbar navbar-default met-nav navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="row">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                        data-target="#navbar-default-collapse" data-toggle="collapse">
                        <span class="sr-only">
                            Toggle navigation
                        </span>
                        <span class="hamburger-bar">
                        </span>
                    </button>
                    <a href="#" ​ class="navbar-brand navbar-logo vertical-align" title="中电金信有限公司(自适应手机端)">
                        <h1 class='hide'>
                            中电金信有限公司(自适应手机端)
                        </h1>
                        <div class="vertical-align-middle">
                            <img src="images/logom.png" alt="中电金信有限公司(自适应手机端)" title="中电金信有限公司(自适应手机端)" />
                        </div>
                    </a>
                    <h2 class='hide'>
                    </h2>
                </div>
                <div class="collapse navbar-collapse navbar-collapse-toolbar" id="navbar-default-collapse">
                    <ul class="nav navbar-nav navbar-right navlist">
                        <li>
                            <a href="index.html" ​ title="网站首页" class="link">
                                网站首页
                            </a>
                        </li>
                        <li class="dropdown margin-left-20">
                            <a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown"
                                aria-expanded="false" href="about.html">
                                关于我们
                                <span class="caret">
                                </span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right bullet">
                                <li>
                                    <a href="about.html" ​ class="" title="公司简介">
                                        公司简介
                                    </a>
                                </li>
                                <li>
                                    <a href="message.html" ​ class="" title="在线留言">
                                        在线留言
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown margin-left-20">
                            <a class="dropdown-toggle link active" data-toggle="dropdown" data-hover="dropdown"
                                aria-expanded="false" href="product.html">
                                优质水会
                                <span class="caret">
                                </span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right bullet">
                                <li>
                                    <a href="productcate1.html" ​ class="" title="丽丝">
                                        丽丝水会
                                    </a>
                                </li>
                                <li>
                                    <a href="productcate2.html" ​ class="" title="威美斯">
                                        威美斯水会
                                    </a>
                                </li>
                                <li>
                                    <a href="productcate3.html" ​ class="" title="贝帮">
                                        贝帮水会
                                    </a>
                                </li>
                                <li>
                                    <a href="productcate4.html" ​ class="" title="月荷湾">
                                        月荷湾水会
                                    </a>
                                </li>
                                <li>
                                    <a href="productcate5.html" ​ class="" title="月荷湾">
                                        其它水会
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown margin-left-20">
                            <a class=" link " href="contact.html">
                                联系我们
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right bullet">
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div class="met-banner banner-ny-h" data-height='' style=''>
        <div class="slick-slide">
            <img class="cover-image" src="images/lisi1.jpg" sizes="(max-width: 767px) 767px" alt="果树苗">
        </div>
    </div>
    <button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide">
        <i class="icon wb-chevron-up" aria-hidden="true">
        </i>
    </button>

    <script src="js/index.js"></script>

    <!--请求后端接口数据-->
    <div class="main-content">
        <h1 class="list-title">技师列表</h1>
        <div id="technician-list" class="technician-container">
            <!-- 动态内容将在这里插入 -->
        </div>
    </div>

    <!-- 分页控件 -->
    <div class="pagination-wrapper">
        <div id="pagination">
            <!-- 动态生成的分页按钮 -->
        </div>
    </div>

    <script>
        // ===== JavaScript 代码 =====
        const API_CONFIG = {
            baseUrl: 'http://47.108.230.236:9010',
            endpoint: '/html/list',
            pageSize: 12,
            technicianType: 5
        };

        let currentPage = 1;
        let totalRecords = 0;

        document.addEventListener('DOMContentLoaded', () => {
            loadTechnicians(currentPage);
        });

        async function loadTechnicians(pageNum) {
            try {
                currentPage = pageNum;
                const response = await fetch(
                    `${API_CONFIG.baseUrl}${API_CONFIG.endpoint}?pageNum=${pageNum}&pageSize=${API_CONFIG.pageSize}&type=${API_CONFIG.technicianType}`
                );

                if (!response.ok) throw new Error(`HTTP ${response.status}`);

                const result = await response.json();

                // 假设API返回格式包含total总记录数和rows/data当前页数据
                totalRecords = result.total || 0;
                const technicians = result.rows || result.data || [];

                renderTechnicians(technicians);
                updatePagination();

            } catch (error) {
                console.error('加载失败:', error);
                showError();
            }
        }

        function renderTechnicians(technicians) {
            const container = document.getElementById('technician-list');
            container.innerHTML = '';

            technicians.forEach(tech => {
                const card = document.createElement('div');
                card.className = 'technician-card';

                const imgHtml = tech.mainImg ?
                    `<div class="technician-img">
                        <img src="${API_CONFIG.baseUrl}${tech.mainImg.startsWith('/') ? '' : '/'}${tech.mainImg}"
                             alt="${tech.name || '技师照片'}">
                    </div>` :
                    '<div class="technician-img no-image">暂无图片</div>';

                card.innerHTML = `
                    ${imgHtml}
                    <div class="technician-info">
                        <h3 class="technician-name">${tech.name || '未命名技师'}</h3>
                        <p class="technician-message">${tech.message || '专业服务'}</p>
                        <div class="action-buttons">
                            <a href="contact.html" class="appointment-btn">立即预约</a>
                            <a href="productshow.html?id=${tech.id}" class="detail-btn">查看详情</a>
                        </div>
                    </div>
                `;
                container.appendChild(card);
            });
        }

        function updatePagination() {
            const pagination = document.getElementById('pagination');
            const totalPages = Math.ceil(totalRecords / API_CONFIG.pageSize);

            // 清空分页容器
            pagination.innerHTML = '';

            // 添加上一页按钮（如果不是第一页）
            if (currentPage > 1) {
                const prevBtn = document.createElement('button');
                prevBtn.className = 'page-btn';
                prevBtn.textContent = '上一页';
                prevBtn.onclick = () => loadTechnicians(currentPage - 1);
                pagination.appendChild(prevBtn);
            }

            // 添加页码按钮（最多显示5个页码）
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, currentPage + 2);

            for (let i = startPage; i <= endPage; i++) {
                const pageBtn = document.createElement('button');
                pageBtn.className = `page-btn ${i === currentPage ? 'active' : ''}`;
                pageBtn.textContent = i;
                pageBtn.onclick = () => loadTechnicians(i);
                pagination.appendChild(pageBtn);
            }

            // 添加下一页按钮（如果不是最后一页）
            if (currentPage < totalPages) {
                const nextBtn = document.createElement('button');
                nextBtn.className = 'page-btn';
                nextBtn.textContent = '下一页';
                nextBtn.onclick = () => loadTechnicians(currentPage + 1);
                pagination.appendChild(nextBtn);
            }

            // 添加总记录数显示
            const totalText = document.createElement('span');
            totalText.className = 'total-records';
            totalText.textContent = `共${totalRecords}条记录`;
            pagination.appendChild(totalText);
        }

        function showError() {
            document.getElementById('technician-list').innerHTML =
                '<div class="error-message">数据加载失败，请刷新重试</div>';
        }
    </script>

    <style>
        /* ===== 全局基础样式 ===== */
        body {
            font-family: Arial, sans-serif;
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        /* ===== 蓝色列表标题（保持不变） ===== */
        .list-title {
            font-size: 22px;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #1890ff;
            color: #1890ff;
        }

        /* ===== 桌面端修复方案 ===== */
        .technician-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 15px;
        }

        /* 关键修复：电脑端卡片布局 */
        .technician-card {
            height: 287px;
            /* 保持固定高度 */
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            position: relative;
            /* 新增定位上下文 */
        }

        /* 图片区域固定高度 */
        .technician-img {
            height: 160px;
            width: 100%;
            overflow: hidden;
            flex-shrink: 0;
        }

        /* 内容区域使用绝对定位固定按钮 */
        .technician-info {
            padding: 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
            position: relative;
            /* 新增定位 */
            min-height: 127px;
            /* 160+127=287 */
        }

        /* 按钮容器固定在底部 */
        .action-buttons {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-top: auto;
            position: absolute;
            /* 关键修复 */
            bottom: 12px;
            /* 匹配padding */
            left: 12px;
            right: 12px;
        }


        .technician-name {
            font-size: 16px;
            line-height: 1.25;
            margin: 0 0 8px;
            color: #333;
            font-weight: bold;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .technician-message {
            font-size: 13px;
            line-height: 1.38;
            color: #666;
            margin: 0 0 15px;
            /* 增加下边距给按钮留空间 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .appointment-btn,
        .detail-btn {
            height: 30px;
            padding: 0 12px;
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 500;
        }

        .appointment-btn {
            background: #ff4d4f;
            color: white;
        }

        .detail-btn {
            background: #1890ff;
            color: white;
        }


        /* ===== 分页控件样式 ===== */
        .pagination-wrapper {
            width: 100%;
            padding: 15px 0;
            background: #f5f5f5;
            border-top: 1px solid #e0e0e0;
            margin-top: 20px;
        }

        #pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
        }

        .page-btn {
            padding: 6px 12px;
            background: #fff;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }

        .page-btn:hover {
            color: #1890ff;
            border-color: #1890ff;
        }

        .page-btn.active {
            background: #1890ff;
            color: #fff;
            border-color: #1890ff;
        }

        .total-records {
            color: #666;
            margin-left: 10px;
        }

        /* ===== 通用样式 ===== */
        .technician-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ===== 移动端整体优化方案 ===== */
        @media (max-width: 768px) {
            .technician-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
                /* 增加卡片间距 */
                padding: 10px;
                /* 增加容器内边距 */
            }

            .technician-card {
                height: auto;
                min-height: 260px;
                /* 增加最小高度 */
                display: flex;
                flex-direction: column;
            }

            .technician-img {
                height: 140px;
                /* 适当增加图片高度 */
                flex-shrink: 0;
            }

            .technician-info {
                padding: 12px;
                flex: 1;
                display: flex;
                flex-direction: column;
            }

            /* 按钮容器优化 */
            .action-buttons {
                min-height: 38px;
                /* 增加容器高度 */
                margin-top: auto;
                gap: 8px;
                /* 保持按钮间距 */
                padding-top: 8px;
                /* 增加上内边距 */
            }

            /* 按钮优化 */
            .appointment-btn,
            .detail-btn {
                height: 36px;
                /* 增加高度 */
                min-height: 36px;
                padding: 0 8px;
                font-size: 12px;
                /* 恢复合理字号 */
                line-height: 1.3;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                white-space: nowrap;
                /* 恢复不换行 */
                overflow: hidden;
                text-overflow: ellipsis;
                /* 文字过长显示省略号 */
            }
        }

        /* 超小屏幕优化 */
        @media (max-width: 480px) {
            .technician-container {
                gap: 12px;
                padding: 8px;
            }

            .technician-card {
                min-height: 240px;
            }

            .technician-img {
                height: 130px;
            }

            .action-buttons {
                min-height: 36px;
            }

            .appointment-btn,
            .detail-btn {
                height: 34px;
                font-size: 11px;
                padding: 0 6px;
            }
        }

        /* 最小屏幕优化 */
        @media (max-width: 375px) {
            .technician-container {
                gap: 10px;
            }

            .appointment-btn,
            .detail-btn {
                font-size: 10px;
                padding: 0 5px;
            }
        }

        /* 移动端分页优化 */
        @media (max-width: 768px) {
            .pagination-wrapper {
                position: sticky;
                bottom: 0;
                background: white;
                z-index: 100;
                box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
                padding: 10px 0;
            }

            #pagination {
                flex-wrap: wrap;
                padding: 0 5px;
            }

            .page-btn {
                padding: 5px 10px;
                margin: 2px;
                font-size: 13px;
            }
        }
    </style>

</body>

</html>